<template>
    <div class="order-from">
        <!--头部导航-->
        <div class="order-nav">
            <div class="tab-itm biding" :class="unused ? 'active' : ''" @tap="nouse()">未使用</div>
            <div class="tab-itm futures" :class="lostEfficacy ? 'active' : ''" @tap="nolost()">已失效</div>
        </div>
        <div class="mui-content mui-scroll-wrapper" style="top:84px;">
            <div class="mui-scroll">
                <!--未使用-->
                <div class="unused" v-if="unused">
                    <!-- 优惠券 -->
                    <div class="coupon">
                        <div class="coup-top">
                            <div class="coup-top-left">
                                <ul>
                                    <li>现金券</li>
                                    <li>每满200减100元券</li>
                                </ul>
                            </div>
                            <div class="coup-top-right">
                                <span>￥</span>100
                            </div>
                        </div>
                        <div class="coup-bottom">
                            <ul  >
                                <li >使用期限：2016.12.12~2017.08.02</li>
                                <li >未使用</li>
                            </ul>
                        </div>
                    </div>
                    <!-- 优惠券end -->



                    <!-- 优惠券 -->
                    <div class="coupon">
                        <div class="coup-top">
                            <div class="coup-top-left">
                                <ul>
                                    <li>现金券</li>
                                    <li>每满200减100元券</li>
                                </ul>
                            </div>
                            <div class="coup-top-right">
                                <span>￥</span>100
                            </div>
                        </div>
                        <div class="coup-bottom">
                            <ul  >
                                <li >使用期限：2016.12.12~2017.08.02</li>
                                <li >未使用</li>
                            </ul>
                        </div>
                    </div>
                    <!-- 优惠券end -->
                </div>    
                <!--已失效-->
                <div class="lostEfficacy" v-if="lostEfficacy">
                    <!-- 优惠券 -->
                    <div class="coupon" style="position:relative;">
                        
                        <div class="coup-top cpn">
                            
                            <div class="coup-top-left">
                                <ul>
                                    <li>现金券</li>
                                    <li>每满200减100元券</li>
                                </ul>
                            </div>
                            <div class="coup-top-right">
                                <span>￥</span>100
                            </div>
                             
                        </div>
                        <div class="coup-bottom" >
                            <ul>
                                <li>使用期限：2016.12.12~2017.08.02</li>
                                <li>已失效</li>
                            </ul>
                        </div>
                         <img style="position:absolute;top:0px;right:40px;" width="120" height="120" src="static/img/lost.png" alt="">
                    </div>
                    <!-- 优惠券end -->

                    <!-- 优惠券 -->
                    <div class="coupon" style="position:relative;">
                        
                        <div class="coup-top cpn">
                            
                            <div class="coup-top-left">
                                <ul>
                                    <li>现金券</li>
                                    <li>每满200减100元券</li>
                                </ul>
                            </div>
                            <div class="coup-top-right">
                                <span>￥</span>100
                            </div>
                             
                        </div>
                        <div class="coup-bottom" >
                            <ul>
                                <li>使用期限：2016.12.12~2017.08.02</li>
                                <li>已失效</li>
                            </ul>
                        </div>
                         <img style="position:absolute;top:0px;right:40px;" width="120" height="120" src="static/img/lost.png" alt="">
                    </div>
                    <!-- 优惠券end -->

                   

                   


                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import mui from 'static/js/mui'
    export default {
        data() {
            return {
                unused:true,
                lostEfficacy:false
            }
        },
        components: {
        },
        props: {},
        methods: {
            nolost(){
                this.lostEfficacy=true
                this.unused=false
            },
            nouse(){
                this.lostEfficacy=false
                this.unused=true
            }
        },
        filters: {},
        computed: {},
        created() {},
        mounted() {
            mui.init({
                keyEventBind: {
                backbutton: true  //关闭back按键监听
                }
            })
            mui.back = function () {
                history.go(-1)
            }
            var that = this;
            (function ($) {
                //阻尼系数
                var deceleration = mui.os.ios ? 0.003 : 0.0009
                $('.mui-scroll-wrapper').scroll({
                    bounce:false,
                    indicators: false, //是否显示滚动条
                    deceleration: deceleration
                })
            })(mui)
            
        },
    };

</script>

<style lang="scss" scoped>
    /*点击后的样式*/
    .active {
        color: #ff6a27;
        border-bottom: 1px solid #ff6a27;
    }
    /*下单样式*/
    .order-from {
        .order-nav {
            width: 100%;
            height: 2rem;
            background: #fff;
            display: flex;
            text-align: center;
            font-size: 0.7rem;
            border-bottom: 1px solid #e9e9e9;
            .tab-itm {
                flex: 1;
                line-height: 2rem;
            }
        }
    }

    .unused{
        padding:12px;
    }
    .lostEfficacy{
        padding:12px;
    }


    /* 优惠券 */
    .coupon{
        width:100%;
        height:125px;
        border-radius:5px;
        background:#fff;
        margin-bottom:20px;
    }
    .coup-top{
        height:95px;
        width:100%;
        background-image:radial-gradient(circle farthest-side at 120px 10px , #F7D483,#F2C866);
        background-size: cover;
        border-top-left-radius:5px;
        border-top-right-radius:5px;
        overflow:hidden;
        padding:0px 5px 0px 5px;
         /* border-bottom:1px solid #DA9D38;  */
    }
    .coup-top-left{
        float:left;
        width:60%;
        text-align:left;padding:20px;
    }
    .coup-top-left ul li{
        line-height:32px;
    }
    .coup-top-left ul li:nth-child(1){
        font-size:1.08rem;color:#c47605;
    }
    .coup-top-left ul li:nth-child(2){
        font-size:0.65rem;color:#c47605;
    }
    .coup-top-right{
        float:left;
        width:40%;
        font-size:1.8rem;
        font-family:"微软雅黑";
        line-height:100px;
        text-align:right;
        padding-right:20px;
        color:#fff;
    }
    .coup-top-right span{
        font-size:1rem;
    }
    .coup-bottom{
        line-height:30px;
        font-size:0.6rem;
        color:#333333;
    }
    .coup-bottom ul li{
        list-style:none;
        display:inline-block;
    }
    .coup-bottom ul{
        overflow:hidden;
        margin:0px 10px 0px 10px;
    }
    .coup-bottom ul li:nth-child(2){
        float:right;
    }
    /* 已失效 */

    .cpn{
        background-image:radial-gradient(circle farthest-side at 120px 10px , #cccccc,#B2B2B2);
    }
    .cpn .coup-top-left ul li:nth-child(1){
        font-size:1.08rem;color:#888888;
    }
    .cpn .coup-top-left ul li:nth-child(2){
        font-size:0.65rem;color:#888888;
    }

    

</style>